<template>
  <div>
    <XtxMessage text="hello" type="success"/>
    <div class="box"></div>
    <!-- <div class="box2"></div> -->
    <button @click="open">我是一个按钮</button>
    <h1>{{count}}</h1>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
  </div>
</template>
<script>
import { createVNode, render, onMounted } from 'vue'
// import Message from '@/components/Message'
// 优先导入.vue 文件
import { message } from '@/components/Message/index.js'
// console.log(message)
// import { useIntervalFn } from '@vueuse/core'
import { useCountDown } from '@/hook'
export default {
  name: 'Test',
  setup () {
    onMounted(() => {
      // createVNode 创建虚拟DOM
      const h1 = createVNode('h1', { class: 'mvvm' }, ['我是子元素'])
      console.log(h1)
      // 渲染
      render(h1, document.querySelector('.box'))

      // // 组件
      // // 创建虚拟组件
      // const msg = createVNode(Message, { type: 'success', text: '你好' })
      // // 渲染
      // render(msg, document.querySelector('.box2'))
      // // 修改属性
      // msg.component.setupState.isShow = true
      // setTimeout(() => {
      //   msg.component.setupState.isShow = false
      // }, 2000)
    })

    const open = () => {
      message({ type: 'success', text: '你好' })
    }

    // const count = ref(60)
    // const { pause, resume } = useIntervalFn(() => {
    //   /* your function */
    //   count.value--
    //   if (count.value <= 0) {
    //     pause()
    //   }
    // }, 1000)
    const { count, pause, start } = useCountDown(10)
    return { open, count, pause, start }
  }
}
</script>
<style scoped lang="less"></style>
